@extends('home.layouts.app')

@section('title','修改基本资料')

<!-- 设置token -->
<meta name="csrf-token" content="{{csrf_token()}}">

@push('css')
<!-- 页面独立的 -->
<link rel="stylesheet/less" href="{{URL::asset('assets/css/UserProfile.less')}}" />
<style>
    #avatar{
        display: none;
    }
</style>
@endpush

@section('content')
<!-- 导航 -->
<header>
    <div class="left">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-menu-left back"></span>
            <span>返回</span>
        </a>
    </div>
    <div class="center">
        修改基本资料
    </div>
</header>

<!-- 用户信息 -->
<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="{{$LoginUser['avatar'] ? URL::asset('uploads/'.$LoginUser['avatar']) : URL::asset('assets/images/avatar.png') }}" />
    </div>
</div>

<form class="profile wow fadeInUp" data-wow-delay="200ms" action="{{url('home/user/profileform')}}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="text" class="form-control" value="{{$LoginUser['email']}}" id="email" disabled placeholder="请输入邮箱" required />
    </div>


    <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" class="form-control" value="{{$LoginUser['nickname']}}" name="nickname" id="nickname" placeholder="请输入昵称" required />
    </div>

    <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" class="form-control" value="{{$LoginUser['phone']}}" name="phone" id="phone" placeholder="请输入手机号" required />
    </div>

    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" />
    </div>

    <div class="form-group">
        <label for="sex">性别</label>
        <select class="form-control" name="sex" id="sex">
            <option>请选择</option>
            <option value="0" {{$LoginUser['sex'] == 0 ? 'selected' : ''}}>保密</option>
            <option value="1" {{$LoginUser['sex'] == 1 ? 'selected' : ''}}>男</option>
            <option value="2" {{$LoginUser['sex'] == 2 ? 'selected' : ''}}>女</option>
        </select>
    </div>

    <div class="form-group">
        <label for="province">省份</label>
        <select class="form-control" name="province" id="province">
            <option>请选择</option>
            @foreach($province as $item)
                <option value="{{$item->code}}" {{$LoginUser['province'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="city">市</label>
        <select class="form-control" name="city" id="city">
            <option>请选择</option>
            @foreach($city as $item)
                <option value="{{$item->code}}" {{$LoginUser['city'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="district">区</label>
        <select class="form-control" name="district" id="district">
            <option>请选择</option>
            @foreach($district as $item)
                <option value="{{$item->code}}" {{$LoginUser['district'] == $item->code ? 'selected' : ''}}>{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label style="display:block">头像</label>
        <input type="file" class="form-control" name="avatar" id="avatar" />
        <label for="avatar">
            <img src="{{$LoginUser['avatar'] ? URL::asset('uploads/'.$LoginUser['avatar']) : URL::asset('assets/images/upload.png') }}" alt="" id="img">
        </label>
    </div>

    <div class="action">
        <button class="btn">提交</button>
    </div>
</form>
@endsection

@push('script')
<script>
    $('#avatar').change(function(){
        let file = $(this)[0].files[0] ? $(this)[0].files[0] : {}

        let url = GetObjectURL(file)

        $('#img').attr('src',url)
    })
    $('#province').change(function(){
        let code = $(this).val()

        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $('#city').html(option)

                GetCity(res.data[0].code,'#district')

            }
        })
    })

    $('#city').change(function(){
        let code = $(this).val()

        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $('#district').html(option)

            }
        })
    })

    function GetCity(code,element)
    {
        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $(element).html(option)

            }
        })
    }

    // 图片预览函数
    function GetObjectURL(file) {
        // createObjectURL  给一个文件对象 可以提取出一个url本地地址出来
        var url = null;

        //判断是否为IE浏览器还是google还是其他浏览器
        if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
        }

        return url
    }
</script>
@endpush